<template>
  <div class="main">
      <div class="main-top">
          <h3>{{title1}}<span>{{title2}}</span></h3>
      </div>
      <div class="main-bottom">
          <ul>
              <li v-for="(v,i) in arr" :key="i">
                  <span><img :src="v.img" alt=""></span>
                  <h3>【烧烤】烧烤全家福</h3>
                  <div class="price"><b>￥95</b>/份</div>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
        data(){
            return{
                title1:"---推荐•",
                title2:"RECOMMEND--",
                arr:[
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                    {img:"/image/Shop/3.jpg",main1:"【烧烤】烧烤全家福",main2:"￥95",main3:"/份"},
                ]
            }
        }
}
</script>

<style scoped>
/* main */
    .main{
        width: 100%;
        background-color:#f3f3f3;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
/* 推荐 */
    .main-top{
        width: 3.895rem;
        height: 0.72rem;
        background-color:#f3f3f3;
        margin-top: 1rem;
    }
    .main-top>h3{
        color: black;
        font-weight: normal;
        font-size: 0.12rem;
        margin-top: 0.42rem;
        text-align: center;
    }
    .main-top>h3 span{
        color: #0ec3e7;
    }
/* 推荐的商品 */
    .main-bottom{
        width: 3.895rem;
        background-color:#fefefe;
    }
    .main-bottom>ul{
        width: 3.895rem;
        background-color:#f3f3f3;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .main-bottom>ul>li{
        width: 1.92rem;
        height: 3.015rem;
        background-color: #fefefe;
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.03rem
    }
    .main-bottom>ul li span{
        display: block;
        width: 1.92rem;
        height: 1.92rem;
        background-color: #fefefe;
    }
    .main-bottom>ul li span img{
        display: block;
        width: 1.92rem;
        height: 1.92rem;
    }
    .main-bottom>ul li h3{
        font-size: 0.12rem;
        font-weight: normal;
        margin-left: 0.15rem;
        display: inline-block;
        width: 1.92rem;
    }
    .main-bottom>ul li .price{
        width: 0.56rem;
        height: 0.22rem;
        margin-top: 0.51rem;
        margin-left: 0.1rem;
        color: gray;
        font-size: 0.1rem;
    }
    .main-bottom>ul li .price>b{
        font-size: 0.12rem;
        color: red;
    }
</style>